var __assign =
  (this && this.__assign) ||
  function () {
    __assign =
      Object.assign ||
      function (t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
          s = arguments[i];
          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
        return t;
      };
    return __assign.apply(this, arguments);
  };
var __spreadArray =
  (this && this.__spreadArray) ||
  function (to, from, pack) {
    if (pack || arguments.length === 2)
      for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
          if (!ar) ar = Array.prototype.slice.call(from, 0, i);
          ar[i] = from[i];
        }
      }
    return to.concat(ar || Array.prototype.slice.call(from));
  };
import React, { useEffect, useRef, useState } from 'react';
import { Button, Form, Row, Space } from 'antd';
import { DroppedItem } from './components/DroppedItem';
import { CreateSchemaModel } from './components/CreateSchemaModel';
import { LeggoSchema } from '../../utils/LeggoSchema';
import { useConfigContext } from '../contexts/ConfigContext';
import _ from 'lodash';
var defaultFormProps = {
  name: undefined,
  labelCol: { span: 6, offset: 0 },
  wrapperCol: { span: 16, offset: 0 },
  colon: true,
  labelAlign: 'right',
  layout: 'horizontal',
  scrollToFirstError: false,
  size: undefined,
  validateTrigger: 'onChange',
  preserve: true,
  requiredMark: true,
  labelWrap: true
};
export default function LeggoMiddle(props) {
  var formSchema = props.formSchema;
  var _a = useConfigContext(),
    schemaList = _a.schemaList,
    itemStore = _a.itemStore,
    setSchemaList = _a.setSchemaList,
    activeSchema = _a.activeSchema,
    setItemStore = _a.setItemStore;
  var form = Form.useForm()[0];
  var _b = useState(false),
    formSchemaInitFlag = _b[0],
    setFormSchemaInitFlag = _b[1];
  var schemaModelJSONCache = useRef({});
  var formProps = useRef(defaultFormProps);
  var targetIndex = useRef(null);
  var handleDragOver = function (e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
  };
  useEffect(
    function () {
      if (
        formSchema &&
        JSON.stringify(formSchema) !== '{}' &&
        JSON.stringify(itemStore) !== '{}' &&
        !formSchemaInitFlag
      ) {
        schemaModelJSONCache.current = formSchema;
        setSchemaList(formSchema.schemaList);
        var _ItemStore_1 = _.cloneDeep(itemStore);
        formSchema.schemaList.forEach(function (item) {
          if (_ItemStore_1[item.type]) {
            _ItemStore_1[item.type].hidden = true;
          }
        });
        setFormSchemaInitFlag(true);
        setItemStore(_ItemStore_1);
      } else if (JSON.stringify(formSchema) === '{}' && formSchemaInitFlag) {
        schemaModelJSONCache.current = formSchema;
        setSchemaList([]);
        setFormSchemaInitFlag(false);
      }
    },
    [formSchema, itemStore]
  );
  var handleDrop = function (e) {
    var _a;
    e.preventDefault();
    var schemaType = e.dataTransfer.getData('text/plain');
    if (!schemaType) {
      return;
    }
    var leggoItemInfo = itemStore[schemaType];
    console.log('handle drop', leggoItemInfo, schemaType);
    setItemStore(
      __assign(
        __assign({}, itemStore),
        ((_a = {}), (_a[schemaType] = __assign(__assign({}, leggoItemInfo), { hidden: true })), _a)
      )
    );
    var newSchema = new LeggoSchema(schemaType, leggoItemInfo);
    if (
      !schemaList.find(function (item) {
        return item.type === newSchema.type;
      })
    ) {
      setSchemaList(__spreadArray(__spreadArray([], schemaList, true), [newSchema], false));
    }
  };
  var clearAllSchemas = function () {
    activeSchema.current = null;
    var _ItemStore = _.cloneDeep(itemStore);
    for (var key in _ItemStore) {
      if (_ItemStore[key]) {
        _ItemStore[key].hidden = false;
      }
    }
    setItemStore(_ItemStore);
    setSchemaList([]);
  };
  useEffect(function () {
    form.validateFields();
  });
  return React.createElement(
    'div',
    { className: 'leggo-configs-middle' },
    React.createElement(
      'div',
      { className: 'top-area' },
      React.createElement('strong', null, '\u8868\u5355\u6A21\u677F'),
      React.createElement(
        'div',
        { className: 'top-actions' },
        React.createElement(
          Space,
          null,
          React.createElement(CreateSchemaModel, {
            formProps: formProps.current,
            schemaModelJSONCache: schemaModelJSONCache
          }),
          React.createElement(Button, { onClick: clearAllSchemas }, 'clear')
        )
      )
    ),
    React.createElement(
      Form,
      __assign({ form: form }, formProps.current, { className: 'leggo-configs-middle-form' }),
      React.createElement(
        'div',
        { className: 'drop-area', onDragOver: handleDragOver, onDrop: handleDrop },
        React.createElement(
          Row,
          { gutter: 24 },
          schemaList.map(function (schema, index) {
            return React.createElement(DroppedItem, {
              key: schema.id,
              index: index,
              targetIndex: targetIndex,
              schema: schema
            });
          })
        )
      )
    )
  );
}
